<template>
  <div class="gthjkjy">
    <p class="top">
      <span style="font-weight: 700; font-size: 16px; color: #000">{{
        info.residentName
      }}</span>
      <span style="display: inline-block; margin: 0 20px"
        >证件号：{{ info.idNo }}</span
      >
      <span>填表人：{{ info.respDoctorId }}</span>
    </p>
    <div class="box">
      <span>服务日期：</span>
      <el-date-picker
        v-model="info.heldDate"
        align="right"
        type="date"
        placeholder="选择服务日期"
        :picker-options="pickerOptions"
        size="small"
      >
      </el-date-picker>
    </div>
    <div class="box">
      <span>活动地址：</span>
      <el-input
        size="small"
        style="width: 400px; margin-left: 10px"
        placeholder=""
        v-model="info.heldAddress"
      ></el-input>
    </div>
    <div class="box">
      <span>活动形式：</span>
      <el-input
        size="small"
        style="width: 150px; margin-left: 10px"
        placeholder=""
        v-model="info.activityForm"
      ></el-input>
      <span style="margin-left: 5px">活动形式活动主题：</span>
      <el-input
        size="small"
        style="width: 150px; margin-left: 10px"
        placeholder=""
        v-model="info.theme"
      ></el-input>
    </div>
    <div class="box">
      <span>活动组织者：</span>
      <el-input
        size="small"
        style="width: 150px; margin-left: 10px"
        placeholder=""
        v-model="info.organizers"
      ></el-input>
      <span style="margin-left: 5px">宣教人：</span>
      <el-input
        size="small"
        style="width: 150px; margin-left: 10px"
        placeholder=""
        v-model="info.publicityMan"
      ></el-input>
    </div>
    <div class="box">
      <span>受教人员类别：</span>
      <el-input
        size="small"
        style="width: 150px; margin-left: 10px"
        placeholder=""
        v-model="info.educatedPersonnel"
      ></el-input>
      <span style="margin-left: 5px">受教人数：</span>
      <el-input
        size="small"
        style="width: 150px; margin-left: 10px"
        placeholder=""
        v-model="info.heldNumber"
      ></el-input>
    </div>
    <div class="box">
      <span>活动内容介绍：</span>
      <el-input
        size="small"
        style="width: 400px; margin-left: 10px"
        placeholder=""
        v-model="info.summary"
      ></el-input>
    </div>
    <div class="box">
      <span>活动评价：</span>
      <el-input
        size="small"
        style="width: 400px; margin-left: 10px"
        placeholder=""
        v-model="info.evluation"
      ></el-input>
    </div>
    <div class="box">
      <table border="1" cellspacing="0">
        <tr>
          <th>宣教资料名称</th>
          <th>宣教资料发放数量</th>
          <th>宣教资料名称</th>
          <th>宣教资料发放数量</th>
        </tr>
        <tr>
          <td>
            <el-input
              size="small"
              style="width: 150px"
              placeholder=""
              v-model="info.materials1"
            ></el-input>
          </td>
          <td>
            <el-input
              size="small"
              style="width: 150px"
              placeholder=""
              v-model="info.materials1Num"
            ></el-input>
          </td>
          <td>
            <el-input
              size="small"
              style="width: 150px"
              placeholder=""
              v-model="info.materials2"
            ></el-input>
          </td>
          <td>
            <el-input
              size="small"
              style="width: 150px"
              placeholder=""
              v-model="info.materials2Num"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>
            <el-input
              size="small"
              style="width: 150px"
              placeholder=""
              v-model="info.materials3"
            ></el-input>
          </td>
          <td>
            <el-input
              size="small"
              style="width: 150px"
              placeholder=""
              v-model="info.materials3Num"
            ></el-input>
          </td>
          <td>
            <el-input
              size="small"
              style="width: 150px"
              placeholder=""
              v-model="info.materials4"
            ></el-input>
          </td>
          <td>
            <el-input
              size="small"
              style="width: 150px"
              placeholder=""
              v-model="info.materials4Num"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>
            <el-input
              size="small"
              style="width: 150px"
              placeholder=""
              v-model="info.materials5"
            ></el-input>
          </td>
          <td>
            <el-input
              size="small"
              style="width: 150px"
              placeholder=""
              v-model="info.materials5Num"
            ></el-input>
          </td>
          <td>
            <el-input
              size="small"
              style="width: 150px"
              placeholder=""
              v-model="info.materials6"
            ></el-input>
          </td>
          <td>
            <el-input
              size="small"
              style="width: 150px"
              placeholder=""
              v-model="info.materials6Num"
            ></el-input>
          </td>
        </tr>
      </table>
    </div>

    <div class="box">
      <span>下次随访日期：</span>
      <el-date-picker
        v-model="info.nextDate"
        align="right"
        type="date"
        placeholder="选择下次随访日期"
        :picker-options="pickerOptions"
        size="small"
      >
      </el-date-picker>
    </div>
    <div class="box">
      <span>随访人：</span>
      <el-input
        placeholder=""
        v-model="info.executorName"
        style="width: 220px"
        size="small"
      >
        <!-- <template slot="append">℃</template> -->
      </el-input>
    </div>
    <div class="box">
      <span>随访机构：</span>
      <el-input
        placeholder=""
        v-model="info.unitName"
        style="width: 220px"
        size="small"
      >
        <!-- <template slot="append">℃</template> -->
      </el-input>
    </div>
  </div>
</template>
    
    <script>
export default {
  data() {
    return {
      info: {
        hospitalId: window.localStorage.getItem("hospitalId"),
        idNo: localStorage.getItem("idCard"),
        residentName: window.localStorage.getItem("residentName"),
        createUserId: window.localStorage.getItem("doctorName"),
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
        ],
      },
      value2: "",
    };
  },
  methods: {
    getInfo(val) {
      this.info = val;
    },
  },
};
</script>
    
    <style scoped lang="scss">
.gthjkjy {
  .top {
    padding: 10px 20px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
  }
  .tab1 {
    tr {
      width: 100%;
      th {
        text-align: center;
        color: #000;
        background-color: rgb(250, 250, 250);
      }
      td {
        padding: 10px;
      }
    }
  }
  .box {
    padding: 10px 250px;
    background-color: rgb(250, 250, 250);
    margin: 10px 0;
  }
}
</style>